import React, { useState } from 'react';
import { useEffect } from 'react';
import styles from './index.module.css';

const Base64Converter = () => {
  const [inputText, setInputText] = useState('');
  const [outputText, setOutputText] = useState('');
  const [error, setError] = useState('');

  const handleEncode = () => {
    try {
      setError('');
      if (!inputText.trim()) {
        setOutputText('');
        return;
      }
      const encoded = btoa(unescape(encodeURIComponent(inputText)));
      setOutputText(encoded);
    } catch (err) {
      setError(`编码错误: ${err.message}`);
      setOutputText('');
    }
  };

  const handleDecode = () => {
    try {
      setError('');
      if (!inputText.trim()) {
        setOutputText('');
        return;
      }
      const decoded = decodeURIComponent(escape(atob(inputText)));
      setOutputText(decoded);
    } catch (err) {
      setError(`解码错误: ${err.message}`);
      setOutputText('');
    }
  };

  const handleClear = () => {
    setInputText('');
    setOutputText('');
    setError('');
  };

  const copyToClipboard = () => {
    if (outputText) {
      navigator.clipboard.writeText(outputText);
      alert('内容已复制到剪贴板');
    }
  };

  useEffect(() => {
      // 设置页面标题
      document.title = "Base64加密解密工具 - 工具集";

      // 设置描述元标签
      const descriptionMeta = document.querySelector('meta[name="description"]');
      if (descriptionMeta) {
        descriptionMeta.content = "免费在线Base64加密解密工具，支持文本与Base64编码互转，简单高效的编码转换解决方案。";
      } else {
        const meta = document.createElement('meta');
        meta.name = "description";
        meta.content = "免费在线Base64加密解密工具，支持文本与Base64编码互转，简单高效的编码转换解决方案。";
        document.head.appendChild(meta);
      }
    }, []);

    return (
        <div className={styles.container}>
        <div className={styles.panel}>
        <h3 className={styles.title}>输入文本</h3>
        <textarea
          className={styles.textarea}
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          placeholder="请输入需要加密或解密的文本"
          rows={10}
        ></textarea>
        <div className={styles.buttonGroup}>
          <button className={styles.button} onClick={handleEncode}>Base64加密</button>
          <button className={styles.button} onClick={handleDecode}>Base64解密</button>
          <button className={styles.button} onClick={handleClear}>清空</button>
        </div>
        {error && <div className={styles.error}>{error}</div>}
      </div>
      <div className={styles.panel}>
        <h3 className={styles.title}>处理结果</h3>
        <textarea
          className={styles.textarea}
          value={outputText}
          readOnly
          placeholder="处理后的结果将显示在这里"
          rows={10}
        ></textarea>
        <button className={styles.copyButton} onClick={copyToClipboard}>复制结果</button>
      </div>
    </div>
  );
};

export default Base64Converter;